﻿var jq = $.noConflict();


jq(document).ready(function() {

    // var myImageSliderObj={
    myImageSliderObj = {
        step: 5,
        id: 'id',
        speed: 10,
        styleLeft: 0,
        styleLeftMax: 0,
        opacity: 0,
        transitionStep: 5,
        transitionSpeed: 10,
        preview2Container: document.getElementById('myImageSlider-previewImage2'),
        previewContainer: document.getElementById('myImageSlider-previewImage'),
        thumbnailContainer: document.getElementById('myImageSlider-imageContainer'),
        thumbnailWidth: 133,


        init: function() {
            this.preloadImages();
            var thismyImageSliderObj = this;

            jq("div#myImageSlider-imageContainer img").click(function() {
                jq("div#myImageSlider-imageContainer img").removeClass("active");
                jq(this).addClass("active");
                thismyImageSliderObj.previewContainer.style.opacity = 0;
                thismyImageSliderObj.previewContainer.style.filter = 'alpha(opacity=0)'; /* For IE8 and earlier */
                thismyImageSliderObj.previewContainer.src = thismyImageSliderObj.images[jq(this).index()].src;
                thismyImageSliderObj.doTransition();
            });

            this.styleLeftMin = -this.thumbnailContainer.getElementsByTagName("img").length * this.thumbnailWidth - 10;
            this.thumbnailContainer.style.width = -1 * this.styleLeftMin + "px";
            this.styleLeftMin = this.styleLeftMin + 300;

            // alert(this.images.length);
            // console.log(this.images);
        },

        doTransition: function() {
            if (this.opacity < 100) {
                this.opacity = this.opacity + this.transitionStep;
                //alert(opacity);
                this.previewContainer.style.opacity = this.opacity / 100;
                this.previewContainer.style.filter = 'alpha(opacity=' + this.opacity + ')'; /* For IE8 and earlier */
                this.timeoutTransition = setTimeout("myImageSliderObj.doTransition()", this.transitionSpeed);
            }
            else {
                this.opacity = 0;
                this.preview2Container.src = this.previewContainer.src;
                clearTimeout(this.timeoutTransition);
            }
        },

/* 
    Function to remove '/thumbs' from string
     */
        removeThumbs: function(name) {
            return name.replace('/thumbs/', '/');
        },


/* 
    Function to preload bigger images from thumbnails
     */
        preloadImages: function() {
            var images = [];

            jq("#myImageSlider-imageContainer img").each(function() {
                var img = new Image();
                img.src = myImageSliderObj.removeThumbs(this.src);
                images.push(img);
            });

            this.images = images;
        },

        slideRight: function() {
            if (this.styleLeft > this.styleLeftMin) {
                this.thumbnailContainer.style.left = this.styleLeft + "px";
                this.styleLeft -= this.step;
                this.timeout = setTimeout("myImageSliderObj.slideRight()", this.speed);
                // console.log('Moved right');
            }

        },

        slideLeft: function() {
            // alert("cac");
            if (this.styleLeft <= this.styleLeftMax) {
                this.thumbnailContainer.style.left = this.styleLeft + "px";
                this.styleLeft += this.step;
                this.timeout = setTimeout("myImageSliderObj.slideLeft()", this.speed);
                // console.log('Moved left');
            }

        },

        clearTimeout: function() {
            clearTimeout(this.timeout);
            // console.log('Stopped');
        }




    };

    // console.log(myImageSliderObj);
    // myImageSliderObj.newstep(20);
    // console.log(myImageSliderObj);
    myImageSliderObj.init();


});